<form method="POST" onSubmit="onSubmit(); return false;">
    <div class="row-fluid">
        <div class="span2">
            <label for="direct-list">{{ _( "Direct List" ) }}</label>
        </div> <!-- .span2 -->
        <div class="span10">
            <textarea id="direct-list" rows="10"></textarea>
        </div> <!-- .span10 -->
    </div> <!-- .row-fluid -->

    <div class="row-fluid">
        <div class="span2">
            <label for="gae-list">{{ _( "GAEProxy List" ) }}</label>
        </div> <!-- .span2 -->
        <div class="span10">
            <textarea id="gae-list" rows="10"></textarea>
        </div> <!-- .span10 -->
    </div> <!-- .row-fluid -->

    <div class="row-fluid">
        <div class="span2">
            <label for="socks-list">{{ _( "SOCKS List" ) }}</label>
        </div> <!-- .span2 -->
        <div class="span10">
            <textarea id="socks-list" rows="10"></textarea>
        </div> <!-- .span10 -->
    </div> <!-- .row-fluid -->

    <div class="row-fluid">
        <div class="span2">
            <label for="redirect-https-list">{{ _( "Redirect HTTPS" ) }}</label>
        </div> <!-- .span2 -->
        <div class="span10">
            <textarea id="redirect-https-list" rows="10"></textarea>
        </div> <!-- .span10 -->
    </div> <!-- .row-fluid -->

    <div class="row-fluid">
        <div class="span2">
            <label for="black-list">{{ _( "Black List" ) }}</label>
        </div> <!-- .span2 -->
        <div class="span10">
            <textarea id="black-list" rows="10"></textarea>
        </div> <!-- .span10 -->
    </div> <!-- .row-fluid -->

    <div class="row-fluid">
        <div class="span12">
            <button class="btn btn-primary btn-block" type="submit">{{ _( "Submit" ) }}</button>
        </div> <!-- .span12 -->
    </div> <!-- .row-fluid -->

</form> <!-- #import-export-ip -->

<script type="text/javascript">
    $.ajax({
        type: 'POST',
        url: '/module/smart_router/control/rules',
        data: {},
        dataType: 'JSON',
        success: function (result) {
            if (result['res'] == 'success') {
                {
                    $('#direct-list').val(result['direct']);
                    $('#gae-list').val(result['gae']);
                    $('#socks-list').val(result['socks']);
                    $('#black-list').val(result['black']);
                    $('#redirect-https-list').val(result['redirect_https']);
                }
            } else {
                displayErrorMessage();
            }
        },
        error: function () {
            displayErrorMessage();
        }
    });

    function onSubmit() {
        var postData = {
            'direct': $('#direct-list').val(),
            'gae': $('#gae-list').val(),
            'socks': $('#socks-list').val(),
            'black': $('#black-list').val(),
            'redirect_https': $('#redirect-https-list').val(),
            'cmd': "set"
        };

        $.ajax({
            type: 'POST',
            url: '/module/smart_router/control/rules',
            data: postData,
            dataType: 'JSON',
            success: function (result) {
                tip('{{ _( "Settings saved successfully." ) }}', 'success');
            },
            error: function () {
                displayErrorMessage();
            }
        });
    }
</script>
